<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="username" name="username" placeholder="请输入你的用户名"><br>
    <input type="password" id="password" name="password" placeholder="请输入你的密码"><br>
    <hr>
    <button onclick="demo01()">通过ID获取元素</button>
    <button onclick="demo02()">通过name获取元素</button>
    <button onclick="demo03()">通过根元素获取元素</button>
</body>
<script>
    //方式一:通过id获取元素值
    function demo01(){
        //获取元素对象
        var obj = document.getElementById('username')
        console.log(obj)
        //获取元素中的值
        alert(obj.value)
        //修改元素中的值
        obj.value = '宋'
    }
    //方式二:通过name获取元素值
    function demo02(){
        //获取元素对象
        var obj = document.getElementsByName('username')[0]
        console.log(obj)
        //获取元素中的值
        alert(obj.value)
        //修改元素中的值
        obj.value = '宋'
    }
    //方式三:通过根元素获取元素值
    function demo03(){
        //获取整个元素对象
        var obj = document.getElementsByTagName('input')
        console.log(obj)
        //循环遍历
        for(var i= 0 ;i<obj.length;i++){
            console.log(obj[i].value)
        }
    }
</script>
</html>